 <template>
  <div class="e-wrap">
    <!-- 商品列表 -->
    <div class="good-list-wrap">
      <div class='good-list'>
        <div class='choose-good'>
          <span>请选择展示商品</span>
          <div>
            <span><w-input :holder='`请输入商品名称关键字`' v-model="listParam.goodsName"></w-input></span>
            <span><w-select-three :options='classifyList' :holder='`请选择商品分类`' v-model="listParam.goodsClassId"></w-select-three></span>
            <w-button @on-click="changePage(1)">搜索</w-button>
          </div>
        </div>
        <!-- 选中的商品列表 -->
        <div class="list clearfix checked-list" style='border-top: 0;' v-if="checkedGood.length">
          <div class="good-item" v-for="(val, index) in checkedGood" :key="index" @click="optionGood(val)">
            <img src="../../../assets/close_r.png" alt="" class="close-icon" v-if="val.deleted" @click="delGood(val.id)">
            <div class="imgBox">
              <img v-lazy='val.goodsMainPhotoPath' alt="">
            </div>
            <div class="good-title">{{val.goodsName}}</div>
          </div>
        </div>
      </div>
      <div class='good-list' v-if='goodList.totalCount'>
        <div class="list clearfix">
          <!-- 查询出来的商品列表 -->
          <div>
            <div class="good-item" v-for='(val, index) in goodList.recordList' :key="index" @click="chooseGood(val)">
              <div class="imgBox">
                <img v-lazy='val.goodsMainPhotoPath' alt="">
              </div>
              <div class="good-title">{{val.goodsName}}</div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="fr">
            <w-paging :current="goodList.currentPage" :total="goodList.pageCount" @on-page='changePage'></w-paging>
          </div>
        </div>
      </div>
      <div v-if='!goodList.totalCount && isShow' style='text-align:center;line-height: 42px;border: 1px solid #D7D7D7;margin-top:20px;color: #f00385;'>没查询到商品</div>
    </div>
  </div>
</template>

<script>
import { apiGoodsMange, apiClassifyMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  props: {
    threeCode: {
      type: String,
      default: 'goodsList'
    },
    defaultChecked: Array
  },
  data() {
    return {
      checkedGood: [], // 选中的商品
      goodList: [], // 搜索结果 （商品列表）
      isShow: false,
      listParam: {
        accessToken: '',
        threeMenuCode: '',
        goodsName: '',
        goodsStatus: 0,
        goodsClassId: '',
        currentPage: 1,
        showCount: 8
      },
      queryParams: {
        accessToken: '',
        threeMenuCode: '',
        type: 'all'
      },
      classifyList: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  watch: {
    defaultChecked: {
      handler(newValue, oldValue) {
        this.checkedGood = newValue
        this.idList()
      },
      deep: true
    }
  },
  created() {
    this._getClassList()
  },
  methods: {
    _getClassList() {
      this.queryParams.accessToken = this.token
      this.queryParams.threeMenuCode = this.threeCode
      apiClassifyMange.apiCommonClassify(this.queryParams).then(data => {
        let oneList = data.data || []
        oneList.forEach(one => {
          let obj = {label: one.className, value: one.id}
          obj.childs = one.twoGoodsClasss.map(v => {
            return {
              label: v.className,
              value: v.id,
              childs: v.threeGoodsClasss || []
            }
          })
          this.classifyList.push(obj)
        })
        // this.classifyList.forEach(one => {
        //   one.childs.forEach(two => {
        //     two.childs.map(item => {
        //       return {
        //         value: item.id,
        //         label: item.className
        //       }
        //     })
        //   })
        // })
        this.classifyList.unshift({label: '请选择商品分类', value: '', childs: []})
      })
    },
    // 选择商品
    chooseGood(data) {
      // 给对象添加属性，判断是否显示 删除 按钮
      this.$set(data, 'deleted', false)

      // 判断是否已经选择过该商品 
      for (let i = 0; i < this.checkedGood.length; i++) {
        if (this.checkedGood[i].id == data.id) { // 以一个唯一标识符判断
          this.$toast('该商品已存在')
          return
        }
      }
      // 将当前点击的商品 加入选中商品的数组
      this.checkedGood.push(data)

      this.idList()
    },
    // 点击 选择 的商品，显示删除按钮 
    optionGood(data) {
      data.deleted = true
    },
    // 搜索商品
    seachGoods() {
      this.listParam.accessToken = this.token
      this.listParam.threeMenuCode = this.threeCode
      this.isShow = true
      // this.listParam.currentPage = 1
      // this.checkedGood = []
      // this.idList()
      apiGoodsMange.apiGetCGoodsLis(this.listParam).then(data => {
        this.goodList = data.data
      })
    },
    changePage(page) {
      this.listParam.currentPage = page
      this.seachGoods()
    },
    // 删除 商品
    delGood(id) {
      for (let i = 0; i < this.checkedGood.length; i++) {
        if (this.checkedGood[i].id == id) {
          this.checkedGood.splice(i, 1)
        }
      }
      this.idList()
    },
    idList() {
      // let checkedId = ''
      // for (let i = 0; i < this.checkedGood.length; i++) {
      //   checkedId += ',' + this.checkedGood[i].id
      // }
      this.$emit('on-goods', this.checkedGood)
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../../scss/_var.scss';
@import '../../../scss/_comment.scss';
.good-list {
  width: 100%;
  margin-top: 20px;
  .choose-good {
    background: $bg-gray-light;
    border: 1px solid $border-gray-light;
    height: 40px;
    & > span {
      margin-left: 20px;
      display: inline-block;
    }
    & > div {
      display: inline-block;
      margin-left: 240px;
      span {
        text-align: right;
        display: inline-block;
        width: 200px;
        margin: 4px 20px;
      }
    }
    button {
      width: 90px !important;
    }
  }
  .list {
    border: 1px solid $border-gray-light;
    padding: 12px 0 0 30px;
    .good-item {
      width: 88px;
      margin-right: 30px;
      margin-bottom: 12px;
      position: relative;
      float: left;
      &:first-child {
        margin-left: 0;
      }
      .close-icon {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 14px;
        height: 14px;
      }
      .good-title {
        height: 32px;
        overflow: hidden;
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }
}
.imgBox {
  width: 90px;
  height: 90px;
}
.fr {
  width: 100%;
  margin: 20px auto;
}
</style>
